import React, { useState, useRef } from 'react'
import { View, Text, ScrollView, StyleSheet } from 'react-native';
import { Button, Toast, useToast } from '../../components';
import BaseView from '../components/base-view'

export default (props: any) => {
  const toast = useToast()
  return (
    <View style={{ backgroundColor: '#f2f2f2', flex: 1, width: '100%', height: '100%' }}>
      <BaseView title="基础用法">
        <Button style={styles.mrb} onPress={()=>toast.show({ message: "提示内容" })} type="primary">文字提示</Button>
      </BaseView>
      <BaseView title="自定义图标">
        <Button style={styles.mrb} onPress={()=>toast.show({ message: "自定义图标",icon:"hearto",iconSize:36 })} type="primary">自定义图标</Button>
      </BaseView>
      <BaseView title="自定义位置">
        <Button style={styles.mrb} onPress={()=>toast.show({ message: "默认展示" })} type="primary">默认展示</Button>
        <Button style={styles.mrb} onPress={()=>toast.show({ message: "顶部展示",position:"top" })} type="primary">顶部展示</Button>
        <Button style={styles.mrb} onPress={()=>toast.show({ message: "底部展示",position:"bottom" })} type="primary">底部展示</Button>
      </BaseView>
    </View>
  )
}

const styles = StyleSheet.create({
  mr: {
    marginRight: 20,
  },
  mrb: {
    marginRight: 20,
  },
})